<template>
  <div   :style="{'border':'1px solid #efefef','height':'100%','width': listPanelParam.width,'height': listPanelParam.height,}" ref="yfuListPanelDiv">
    <div v-show="!listPanelParam.noshowTitle" style="background:#eeeeee;height:30px;font-weight: bold;width:100%;line-height:30px;font-size:13px">
      &nbsp;{{listPanelParam.title}}
    </div>
    <div style="margin-top:5px;margin-bottom: 5px;height:30px"  v-if="listPanelParam.showSearch">
      <el-input v-model="searchValue" size="mini" :placeholder=listPanelParam.placeholder></el-input>
    </div>
    <div  :style="{'width': '100%','height': listPanelHeight,'padding':'0px'}" class="tfscrollbarstyle">

      <div style="line-height:30px;font-size:13px; width:100%;" :class="{'listPanelItem':myindex!=item.id,'listPanelItemBg':myindex==item.id}" @click="yfuListPanelClick(item)" v-for="item in datas">
        <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
        {{item[name]}}
      </div>
    </div>
  </div>
</template>
<style scoped>
 .listPanelItem {
   cursor: pointer;
 }
 .listPanelItemBg {
   cursor: pointer;
   background:#409eff
 }
  .listPanelItem:hover {
    background:#efefee
  }

</style>
<script type="text/javascript">
  import { tfGet, yfuPost } from '@/utils/request.js'
  import global_ from '@/utils/global.vue'
  export default {
    props: ['listPanelParam'],
    watch: {
      searchValue (val) {
        this.filterArray(val)
      }
    },
    data () {
      return {
        myindex: this.listPanelParam.defaultSelected,
        name: this.listPanelParam.name,
        datas: [],
        datasCopy: [],
        listPanelHeight: '100px',
        searchValue: ''
      }
    },
    created () {
      if (this.listPanelParam.placeholder == null || this.listPanelParam.placeholder === '') {
        this.listPanelParam.placeholder = '输入名称进行过滤'
      }
      this.getData()
    },
    mounted () {
      let h = this.$refs.yfuListPanelDiv.getBoundingClientRect().height
      if (h === 0 || h === '0') {
        h = this.$refs.yfuListPanelDiv.style.height
      }
      if (typeof h === 'string') {
        let index = h.indexOf('px')
        let hNumber = h.substring(0, index)
        h = hNumber - 70
        this.listPanelHeight = h + 'px'
      } else {
        if (h > 0) {
          h = h - 70
          this.listPanelHeight = h + 'px'
        }
      }
    },
    methods: {
      clearData () {
        this.datas = []
        this.datasCopy = []
      },
      yfuListPanelClick (item) {
        this.myindex = item.id
        this.$emit('yfuListPanelClick', item)
      },
      refresh () {
        this.getData()
      },
      getData () {
        let cThis = this

        if (global_.isLocalServer) {
          tfGet(cThis.listPanelParam.url, function (data) {
            if (Array.isArray(data)) {
              cThis.datas = data
              cThis.datasCopy = data
            } else {
              if (cThis.listPanelParam.returnParam != null && cThis.listPanelParam.returnParam !== '') {
                cThis.datas = data[cThis.listPanelParam.returnParam.datas]
                cThis.datasCopy = data[cThis.listPanelParam.returnParam.datas]

                if (cThis.listPanelParam.returnParam.defaultSelectedIndex != null &&
                  cThis.listPanelParam.returnParam.defaultSelectedIndex !== '' &&
                  (cThis.datas.length >= (cThis.listPanelParam.returnParam.defaultSelectedIndex + 1))) {
                  cThis.yfuListPanelClick(cThis.datas[cThis.listPanelParam.returnParam.defaultSelectedIndex])
                }
              } else {
                cThis.datas = data.datas
                cThis.datasCopy = data.datas
              }
            }
          })
          return
        }

        // 添加参数
        let tParam = {}
        if (cThis.listPanelParam.urlParam != null && cThis.listPanelParam.urlParam !== '') {
          tParam = cThis.listPanelParam.urlParam
        }
        yfuPost(cThis.listPanelParam.baseURL, cThis.listPanelParam.url, tParam, function (data) {
          if (Array.isArray(data)) {
            cThis.datas = data
            cThis.datasCopy = data
          } else {
            if (cThis.listPanelParam.returnParam != null && cThis.listPanelParam.returnParam !== '') {
              cThis.datas = data[cThis.listPanelParam.returnParam.datas]
              cThis.datasCopy = data[cThis.listPanelParam.returnParam.datas]

              if (cThis.listPanelParam.returnParam.defaultSelectedIndex != null &&
                cThis.listPanelParam.returnParam.defaultSelectedIndex !== '' &&
                (cThis.datas.length >= (cThis.listPanelParam.returnParam.defaultSelectedIndex + 1))) {
                cThis.yfuListPanelClick(cThis.datas[cThis.listPanelParam.returnParam.defaultSelectedIndex])
              }
            } else {
              cThis.datas = data.datas
              cThis.datasCopy = data.datas
            }
          }
        })
      },
      // 构建参数
      createParam () {
        let param1 = {}
        if (this.listPanelParam.urlParam != null) {
          for (let key of Object.keys(this.listPanelParam.urlParam)) {
            param1[key] = this.listPanelParam.urlParam[key]
          }
        }
//        if (this.listPanelParam.showSearch) {
//          if (this.searchValue == null || this.searchValue === '') {
//            return param1
//          }
//          param1[name] = this.searchValue
//        }
        return param1
      },
      filterArray (val) {
        if (val == null || val === '') {
          this.datas = this.datasCopy
        } else {
          let filterarr = []
          for (let arr of this.datasCopy) {
            if (arr[this.name].indexOf(val) >= 0) {
              filterarr.push(arr)
            }
          }
          this.datas = filterarr
        }
      },
      // 得到所有DATAS
      getAllData () {
        return this.datas
      }
    }
  }
</script>
